import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import SCControls 1.0

Window {
    width: 450
    height: 300
    visible: true
    title: "BridgeX_v1.1"

    property int mqttRecvCount: 0

    property real defaultTextFieldWidth:  150
    property real defaultButtonWidth:  50
    property real defaultTextFieldHeight: 28
    property real  _margin:     10

    property string defaultHost: "127.0.0.1"  //broker.emqx.io
    property string defaultPort: "20006"      //1883
    property string defaultSubTopic: "/dev/thirdjam/command/passbacktarget"     //1883

    Component.onCompleted: {
        mqtt.setHost(defaultHost)
        mqtt.setPort(parseInt(defaultPort))
        mqtt.subTopic = defaultSubTopic
        serial.setBaudRate(parseInt("57600"))
    }

    // 设置默认主题
    // Component.onCompleted: {
    //     mqtt.subTopic = defaultSubTopic
    // }

    property var serial: appController.serial
    property var mqtt:   appController.mqtt

    property int serialSendCount: serial.txCount
    property int serialRecvCount: serial.rxCount

    Connections {
        target:  serial
        // function onDataReceived(data) {
        //     var time = Qt.formatDateTime(new Date(), "hh:mm:ss")
        //     serialRecv.append(time + ":" + data)// + "\n")
        // }
        function onDataSend(data) {
            var time = Qt.formatDateTime(new Date(), "hh:mm:ss:ms")
            serialRecv.append(time + ":" + data)// + "\n")
        }
    }

    // Connections {
    //     target:  mqtt
    //     function  onMessageReceived(topic, msg) {
    //         var time = Qt.formatDateTime(new Date(), "hh:mm:ss")
    //         mqttRecv.append(time + ":[" + topic + "] " + msg + "\n")
    //     }
    // }


    AppController {
        id: appController
    }

    // Timer {
    //     repeat:     true
    //     interval:   2000
    //     running:    true
    //     onTriggered:  {
    //         if (!mqtt.connected) {
    //             console.log("try connect")
    //             mqtt.setHost(host.text)
    //             mqtt.setPort(parseInt(port.text))
    //             mqtt.subTopic = subTopic.text
    //             mqtt.connectToHost()
    //         }
    //     }
    // }



    ColumnLayout  {
        anchors.fill: parent
        spacing: _margin
        anchors.margins: _margin

    //     //MQTT 配置
    //     GroupBox {
    //         title: "MQTT 配置"
    //         Layout.fillWidth: true
    //         implicitHeight:  (parent.height - _margin*2 -forward.height ) * 0.55

    //         ColumnLayout  {
    //             anchors.fill: parent
    //             spacing: 10
    //             // anchors.margins: _margin/2
    //             RowLayout {
    //                 spacing: 5
    //                 Layout.fillWidth:  true
    //                 Label { text: "服务器地址" }
    //                 TextField {
    //                     id: host
    //                     text:   defaultHost
    //                     Layout.preferredWidth:  defaultTextFieldWidth * 0.4
    //                     Layout.fillWidth: true
    //                     Layout.preferredHeight: defaultTextFieldHeight
    //                     placeholderText: "broker 地址";
    //                     selectByMouse: true    // 👈 鼠标拖动可以选中
    //                     readOnly: true
    //                 }
    //                 Label { text: "端口" }
    //                 TextField {
    //                     id:                     port;
    //                     text:                   defaultPort
    //                     Layout.preferredWidth:  defaultTextFieldWidth * 0.4
    //                     Layout.fillWidth:       true
    //                     Layout.preferredHeight: defaultTextFieldHeight
    //                     placeholderText:        "端口";
    //                     selectByMouse:          true    // 👈 鼠标拖动可以选中
    //                     readOnly: true
    //                 }

    //                 Label { text: "主题" }
    //                 TextField {
    //                     id:             subTopic
    //                     text:           defaultSubTopic
    //                     Layout.preferredWidth: defaultTextFieldWidth * 1.2
    //                     Layout.fillWidth: true
    //                     Layout.preferredHeight: defaultTextFieldHeight
    //                     selectByMouse: true    // 👈 鼠标拖动可以选中
    //                     readOnly: true
    //                 }

    //                 RowLayout {
    //                     spacing: 5
    //                     Layout.fillWidth: true
    //                     Rectangle {
    //                         width: 12; height: 12; radius: 6
    //                         color: mqtt.connected ? "green" : "red"
    //                     }
    //                     Label {
    //                         text: mqtt.connected ? "已连接" : "未连接"
    //                         color: mqtt.connected ? "green" : "red"
    //                     }
    //                 }
    //             }

    //             // RowLayout {
    //             //     Layout.fillWidth: true
    //             //     spacing: 5
    //                 // Label { text: "主题" }
    //                 // TextField {
    //                 //     id:             subTopic
    //                 //     text:           defaultSubTopic
    //                 //     Layout.preferredWidth: defaultTextFieldWidth * 2
    //                 //     Layout.fillWidth: true
    //                 //     Layout.preferredHeight: defaultTextFieldHeight
    //                 //     selectByMouse: true    // 👈 鼠标拖动可以选中
    //                 //     readOnly: true
    //                 // }
    //                 // Button {
    //                 //     text:       "连接"
    //                 //     Layout.preferredWidth:   defaultButtonWidth
    //                 //     Layout.fillWidth: true
    //                 //     Layout.preferredHeight:   defaultTextFieldHeight
    //                 //     onClicked:
    //                 //         if (mqtt.connected)
    //                 //             mqtt.disconnectFromHost()
    //                 //         else {
    //                 //             mqtt.setHost(host.text)
    //                 //             mqtt.setPort(parseInt(port.text))
    //                 //             mqtt.connectToHost()
    //                 //             mqtt.subTopic = subTopic.text
    //                 //         }

    //                 // }
    //             // }

    //             Rectangle {
    //                 id:     logViewRec
    //                 color:  "transparent"
    //                 Layout.fillWidth: true
    //                 Layout.fillHeight: true
    //                 border.width: 1
    //                 border.color: "#66000000"
    //                 radius: 4   // 圆角更好看
    //                 ScrollView {
    //                     anchors.fill: parent
    //                     TextArea  {
    //                         id: mqttRecv
    //                         // anchors.fill: parent   // 👈 让 ListView 填满 GroupBox
    //                         clip: true             // 👈 防止内容溢出
    //                         readOnly: true          // 只读，避免误修改
    //                         wrapMode: TextArea.WrapAnywhere
    //                         selectByMouse: true     // 鼠标可以拖动选择
    //                         font.family: "Consolas" // 等宽字体
    //                         font.pointSize: 8
    //                         padding: 4
    //                         // model: logModel
    //                         // spacing: 6
    //                         // delegate: RowLayout {
    //                         //     width: logView.width
    //                         //     height: implicitHeight      // 必须有高度，否则会重叠
    //                         //     // spacing: 5
    //                         //     // height: Math.max(24, time.implicitHeight, topic.implicitHeight, payload.implicitHeight) + 6  // 行高 = 最大文本高度 + 一点padding

    //                         //     Text { text: time; color: "gray"; width: 60 }
    //                         //     Text { text: "[" + topic + "]"; color: "blue"; width: 200;  elide: Text.ElideRight }
    //                         //     Text { text: payload; wrapMode: Text.WrapAnywhere; Layout.fillWidth: true }
    //                         // }
    //                         // ScrollBar.vertical: ScrollBar {}

    //                         function appendLog(line) {
    //                             text += line + "\n"
    //                             cursorPosition = length   // 自动滚动到底部
    //                         }
    //                         // onCountChanged: positionViewAtEnd()
    //                     }
    //                 }

    //                 Button {
    //                     text: "清除"
    //                     width:  defaultButtonWidth
    //                     height: defaultTextFieldHeight
    //                     anchors.right: parent.right
    //                     anchors.bottom: parent.bottom
    //                     anchors.margins: _margin/2
    //                     onClicked: {
    //                         mqttRecv.text = ""
    //                     }
    //                 }
    //             }
    //         }
    //     }


        //串口 配置
        GroupBox {
            title: "串口链路"
            Layout.fillWidth: true
            Layout.fillHeight: true
            // implicitHeight:  parent.height - _margin*2 - mqttItem.height
            ColumnLayout {
                anchors.fill:       parent
                spacing:            _margin
                // anchors.margins: _margin/2
                RowLayout {
                    spacing:        _margin
                    Layout.fillWidth: true
                    ComboBox {
                        id: portSelect
                        model: serial.availablePorts
                        Layout.preferredWidth: defaultTextFieldWidth * 1.5
                        Layout.preferredHeight: defaultTextFieldHeight
                        Layout.fillWidth: true
                        textRole: "displayName"   // 显示 “COM3 — USB-SERIAL CH340” 形式
                        valueRole: "portName"     // 实际值是 COM3
                        onActivated: {
                            // serial.setPort(currentText)
                            serial.setPort(currentValue)  // currentValue 对应 portName

                        }
                        Component.onCompleted: {
                            // serial.setPort(currentText)
                            serial.setPort(currentValue)

                        }
                    }
                    // ComboBox {
                    //     id: baudSelect
                    //     Layout.preferredWidth: defaultTextFieldWidth * 0.8
                    //     Layout.preferredHeight: defaultTextFieldHeight
                    //     Layout.fillWidth: true
                    //     model: ["9600", "19200", "38400", "57600", "115200"]
                    //     currentIndex: 3
                    //     onActivated: serial.setBaudRate(parseInt(currentText))
                    //     Component.onCompleted: {
                    //         serial.setBaudRate(parseInt(currentText))
                    //     }
                    // }
                    Button {
                        text: serial.connected ? "关闭串口" : "打开串口"
                        Layout.preferredWidth: defaultButtonWidth * 2
                        Layout.preferredHeight: defaultTextFieldHeight
                        Layout.fillWidth: true
                        onClicked: {
                            if (serial.connected)
                                serial.closePort()
                            else
                                serial.openPort()
                        }
                    }
                    Label { text: "发送: " + serialSendCount  }
                }


                Rectangle {
                    id:     serialViewRec
                    color:  "transparent"
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    border.width: 1
                    border.color: "#66000000"
                    radius: 4   // 圆角更好看
                    ScrollView {
                        anchors.fill: parent
                        TextArea {
                            id: serialRecv
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            readOnly: true
                            wrapMode: Text.WrapAnywhere
                            selectByMouse: true     // 鼠标可以拖动选择
                            font.family: "Consolas" // 等宽字体
                            font.pointSize: 8
                            padding: 4
                        }
                    }
                    Button {
                        text: "清除"
                        width:  defaultButtonWidth
                        height: defaultTextFieldHeight
                        anchors.right: parent.right
                        anchors.bottom: parent.bottom
                        anchors.margins: _margin/2
                        onClicked: {
                            serialRecv.text = ""
                        }
                    }
                }
        }

            // RowLayout {
            //     Layout.fillWidth: true
            //     spacing: 10
                // TextField {
                //     id: serialSend;
                //     Layout.preferredWidth: defaultTextFieldWidth
                //     Layout.preferredHeight: defaultTextFieldHeight
                //     Layout.fillWidth: true
                //     placeholderText: "输入要发送的内容"
                // }
                // Button {
                //     text: "发送"
                //     Layout.preferredWidth: defaultButtonWidth
                //     Layout.preferredHeight: defaultTextFieldHeight
                //     Layout.fillWidth: true
                //     onClicked: {
                //         serial.sendData(serialSend.text)
                //         // serialSendCount++
                //     }
                // }
            //     Button {
            //         Layout.preferredWidth: defaultButtonWidth * 2
            //         Layout.preferredHeight: defaultTextFieldHeight
            //         Layout.fillWidth: true
            //         text: "清空发送"; onClicked: serialSend.text = ""
            //     }
            //     Rectangle {
            //         width:  1
            //         Layout.preferredHeight:   defaultTextFieldHeight
            //         color: "black"
            //     }
            //     Button {
            //         Layout.preferredWidth: defaultButtonWidth * 2
            //         Layout.preferredHeight: defaultTextFieldHeight
            //         Layout.fillWidth: true
            //         text: "清空接收";
            //         onClicked: { serialRecv.text = ""; serial.rxCount = 0 }
            //     }
            // }
        }

        // GroupBox {
        //     id:    forward
        //     title: "开启转发"
        //     Layout.fillWidth: true
        //     implicitHeight:  mqttForward.height * 1.5

        //     CheckBox {
        //         id: mqttForward
        //         anchors.verticalCenter: parent.verticalCenter
        //         text: "一键转发 MQTT → 串口"
        //         checked: appController.mqttForward   // 绑定到 C++ 属性
        //         onCheckedChanged: appController.mqttForward = checked
        //     }
        // }
        RowLayout {
            id:      mqttItem
            spacing: 5
            width:  parent.width
            Layout.fillWidth: true
            Item {
                width: 8
                height:1
            }
            Label { text: "雷达链路: " }
            Rectangle {
                width: 12;
                height: 12;
                radius: 6
                color: mqtt.connected ? "green" : "red"
            }
            Label {
                text: mqtt.connected ? "已连接" : "未连接"
                color: mqtt.connected ? "green" : "red"
            }
        }
    }

    ListModel { id: logModel }
}

// RowLayout {
//     Layout.fillWidth: true
//     spacing: _margin
//     TextField {
//         id: pubTopic;
//         placeholderText: "主题" ;
//         selectByMouse: true
//         Layout.preferredWidth:  defaultTextFieldWidth
//         Layout.fillWidth: true
//         Layout.preferredHeight: defaultTextFieldHeight
//     }
//     TextField {
//         id: pubPayload;
//         placeholderText: "消息内容" ;
//         selectByMouse: true
//         Layout.preferredWidth:  defaultTextFieldWidth
//         Layout.fillWidth: true
//         Layout.preferredHeight: defaultTextFieldHeight
//     }
//     Button {
//         text:       "发送"
//         Layout.preferredWidth:   defaultButtonWidth
//         Layout.fillWidth: true
//         Layout.preferredHeight:   defaultTextFieldHeight
//         onClicked:
//             mqtt.publishMessage(pubTopic.text, pubPayload.text, 0, false)
//             // mqtt.publishMessage(pubTopic.text, pubPayload.text)
//     }
//     Rectangle {
//         width:  1
//         Layout.preferredHeight:   defaultTextFieldHeight
//         color: "black"
//     }
//     Button {
//         text: "清空接收";
//         Layout.preferredWidth:   defaultButtonWidth* 2
//         Layout.preferredHeight:   defaultTextFieldHeight
//         Layout.fillWidth: true
//         onClicked: logModel.clear()
//     }
// }

// Button {
//     text: mqtt.connected ? "断开" : "连接"
//     Layout.preferredWidth:  defaultButtonWidth
//     Layout.fillWidth:       true
//     Layout.preferredHeight: defaultTextFieldHeight
//     onClicked: {
//         // if (mqtt.connected)
//         //     mqtt.disconnectFromHost()
//         // else {
//         //     mqtt.setHost(host.text)
//         //     mqtt.setPort(parseInt(port.text))
//         //     mqtt.connectToHost()
//         // }
//     }
// }
// Button {
//     text:       "取消订阅"
//     Layout.preferredWidth:   defaultButtonWidth * 2
//     Layout.fillWidth: true
//     Layout.preferredHeight:   defaultTextFieldHeight
//     onClicked:
//         mqtt.subTopic = ""
// }
